<template>
	<ul class="pagination" v-show="list.length>1" v-if="list.length<=size">
		<!-- <li class="disabled"> -->
		<li @click="prev()" :class="{disabled:active==1}">
			<a href="javascript:;">
				<i class="fa fa-angle-left"></i>
				前一页
			</a>
		</li>
		<li :class="{active:item==active}" v-for="(index,item) in list" @click="page(item)">
			<a href="javascript:;">{{item}}</a>
		</li>		
		<li @click="next()" :class="{disabled:active==num}">
			<a href="javascript:;">
				<i class="fa fa-angle-right"></i>
				后一页
			</a>
		</li>
	</ul>
	
	<ul class="pagination" v-show="list.length>1" v-else>
		<!-- <li class="disabled"> -->
		<li @click="first()" :class="{disabled:active==1}">
			<a href="javascript:;">
				首页
			</a>
		</li>		
		<li @click="prev()" :class="{disabled:active==1}">
			<a href="javascript:;">
				<i class="fa fa-angle-left"></i>
				前一页
			</a>
		</li>
		<li @click="first()" class="paginate_button" v-if="prevcontext">
			<a href="javascript:;">1</a>
		</li>			
		<li class="paginate_button disabled" v-if="prevcontext">
			<a href="javascript:;">…</a>
		</li>			
		<li :class="{active:item==active}" v-for="(index,item) in mainlist" @click="page(item)">
			<a href="javascript:;">{{item}}</a>
		</li>		
		<li class="paginate_button disabled" v-if="nextcontext">
			<a href="javascript:;">…</a>
		</li>	
		<li @click="last()" class="paginate_button" v-if="nextcontext">
			<a href="javascript:;">{{list.length}}</a>
		</li>		
		<li @click="next()" :class="{disabled:active==num}">
			<a href="javascript:;">
				<i class="fa fa-angle-right"></i>
				后一页
			</a>
		</li>
		<li @click="last()" :class="{disabled:active==num}">
			<a href="javascript:;">
				最后一页
			</a>
		</li>		
	</ul>	
</template>

<script>
	export default {
		data: () => ({
			list: [1],
			active: 1,
			length: 8,
			num:1,
//			size:5,
			nextcontext:false,
			prevcontext:false
		}),
		props: {
			size: {
				type: String,
				default:function() {
					return 5
				}
			},
		},
		computed: {
			mainlist() {
				let list = this.list;
				let range = list.length;
		
				let activeIndex = this.active -1;
				let size = this.size;		
		
				let startIndex;
				let endIndex;
		
				if(activeIndex<size-1) {
						this.$set("prevcontext",false)	
				} else {
						this.$set("prevcontext",true)						
				}
	
				if(activeIndex+Math.floor(size/2)+1>=range) {
					this.$set("nextcontext",false)	
				} else {
					this.$set("nextcontext",true)	
				}
	
				if(activeIndex<size-1) {
					startIndex = 0;
				} else if(activeIndex+Math.floor(size/2)+1>=range) {
					startIndex = range - size;
				}
				else {
					startIndex = activeIndex - Math.floor(size/2);
				}		
				endIndex = startIndex+size;
				let result = list.slice(startIndex,endIndex);
				return result;
			},
		},
		methods: {
			dispatch(active) {
					this.$dispatch("pagination", active);
			},
			init(total,length) {
				if(length){
					this.$set("length",length);
				} else {
					length = this.length;
				}
				let num = Math.ceil(total/length);
				this.$set("num",num);
				let arr = [];

				for(let i = 1;i<=num;i++) {
					arr.push(i);
				}
				if(arr.toString()==this.list.toString()) {
					return false;					
				} else {
					this.$set("list",arr);
				}
			},
			setData(length,active) {
				if(length){
					this.$set("length",length);
				} else {
					length = this.length;
				}				
				
				if(active){
					this.$set("active",active);
				} else {
					active = this.active;
				}							
				let aoData = JSON.stringify([{
					"name": "iDisplayStart",
					"value": active
				}, {
					"name": "iDisplayLength",
					"value": length
				}]);		
				return aoData;
			},
			page(item) {
				this.$set("active", item);
				this.dispatch();
			},
			first() {
				if (this.active == 1) {
					return false;
				}
				let active = 1;
				this.$set("active", active);		
				this.dispatch(active);				
			},
			last() {
				let length = this.list.length;
				if (this.active == length) {
					return false;
				}
				let active = length;
				this.$set("active", active);		
				this.dispatch(active);					
			},
			prev() {
				if (this.active - 1 <= 0) {
					return false;
				}
				let active = this.active - 1;
				this.$set("active", active);
				this.dispatch(active);
			},
			next() {
				if (this.active >= this.num) {
					return false;
				}
				let active = this.active + 1;
				this.$set("active", active);
				this.dispatch(active);
			}
		},
		ready() {

		}
	}
</script>